CSS Animation Using Animate.css

Instruction: HOVER OVER heading above to see it animate.

Instructions for HOME page only

Instruction: CLICK ON the heading above to see it animate.

Resource: Animate.css file.

If you have multiple page with the same classes assigned to them, all of these pages will animated. To prevent this, you can add or remove class for a given page.

1. Save the first file as a new file (e.g., ClickAndHover.html).
2. Go to jQuery.com and find the CDN code to link to the jQuery library. It should be similar to this:
   
   

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

   NOTE: Since we need to use jQuery we need to connect to it.
   
3. Add the link element to connect to the animate.css file in the head element.
   
   

   <link href="animated.css" rel="stylesheet" type="text/css" />

4. Write the following code to ensure jQuery is connected.
   
   

   <script>
   $(document).ready(function(e){
     alert("jQuery is working correctly.")
   }); // end ready
   </script> 
   </head>                               

5. Save and test the file. You should see the alert dialog box with the message "jQuery is working correctly."
6. Delete the alert line and add the following code in its place:
   
   TIP: Open this page and copy the code using View Source.
   
   

   <script>
   $(document).ready(function(e) {
   animationHover("#myHeading", "tada");
   animationClick("#myTitle", "tada");	
    // Animate when hover over
    function animationHover(element, animation){
     element = $(element);
     element.hover(
       function() {
         element.addClass('animated ' + animation);
       },
       function(){
         // wait for animation to finish before removing classes
         window.setTimeout( function(){
           element.removeClass('animated ' + animation);
         }, 2000);
       }
     );
   }; // end animateHover
   
   function animationClick(element, animation){
   element = $(element);
   element.click( function() {
   element.addClass('animated ' + animation);
   // wait for animation to finish before removing classes
   window.setTimeout( function(){
   element.removeClass('animated ' + animation);
   }, 2000);
   }
   );
   }; // end animateClick
   }); // end ready
   </script>
                   

   
   NOTE: Notice that the element.hover (....); statement has TWO FUNCTIONS separated by a COMMA in it.
   (There is also another function in the window.setTimeout( funtion(){....}); statement as well.)
   
   

     element.hover(
       function() {
         element.addClass('animated ' + animation);
       },
       function(){
         //wait for animation to finish before removing classes
         window.setTimeout( function(){
           element.removeClass('animated ' + animation);
         }, 2000);
       }
     );

   While we could have used ONE function, it common practice to limit a function to one specific task at a time. We could have written the code as below and it would work the same:
   
   

   function animationHover(element, animation){
     element = $(element);
     element.hover(
       function() {
         element.addClass('animated ' + animation);
         window.setTimeout( function(){
         element.removeClass('animated ' + animation);
         }, 2000);
       }
   );
   }; //end animateHover

   
   
7. Add the following highlighted ids to the h1 elements.
   
   

   <h1 id="myHeading">CSS Animation Using Animate.css </h1>
   <p><strong>Instruction: HOVER OVER</strong> heading above to see it animate.</p>
   <h1 id="myTitle">Instructions for HOME page only</h1>
   <p><strong>Instruction<: CLICK ON</strong> the heading above to see it animate.</p>

8. CHECK POINT: Save the file and preview it in a browser. Hover over the first heading to see it animate and click on the second heading to see it animate.